<template>
<div class="" style="background-color:rgba(236, 240, 243, 1); min-height: 100%">
    <el-row>
        <el-col :span="8" v-for="(item, index) in menuList" :key="index">
            <div :style="{paddingLeft: index == 0 ? '0':'20px'}">
                <div class="iMBox clearfix">
                    <img :src="item.ico1" alt="" class="i1 top10">
                    <p class="font24">{{item.tit}}</p>
                    <p class="line50 top10">
                        <span class="t1" :style="{backgroundImage: item.color}">{{item.a}}</span>
                        <span class="right">
                            <img :src="item.ico2" alt="" class="i2">
                            <span class="font20 left5 ">{{item.b}}</span>
                        </span>
                    </p>
                </div>
            </div>
        </el-col>
    </el-row>
    <div class="top20 commonBox">
        <div class="t"><span class="tit1">养老服务培训专项资金使用情况</span></div>
        <table class="top20">
            <tr>
                <td v-for="(item, index) in list1" :key="index" style="min-width: 220px" :style="{width: item.per + '%'}">
                    <div>
                        <span class="yuan verMid" :style="{backgroundColor: item.color1}"></span>
                        <span class="font35 verMid left5" :style="{color: item.color1}">{{item.per}}%</span>
                        <span class="verMid left5">{{item.b}}</span>
                    </div>
                    <div class="line1 top20" :style="{background: item.color2}"></div>
                </td>
            </tr>
        </table>
    </div>
    <el-row class="top20">
        <el-col :span="14">
            <Chart1 />
        </el-col>
        <el-col :span="10">
            <Chart2 />
        </el-col>
    </el-row>
    <div class="commonBox top20" >
        <p>
            <span class="tit1">培训机构（20家）</span>
        </p>
        <el-table ref="multipleTable" class="top10" :data="list" fit highlight-current-row style="width: 100%;" header-row-class-name="tableHeader">
            <el-table-column label="培训机构编号" prop="a" align='center'></el-table-column>
            <el-table-column label="培训机构名称" prop="b" align='center'></el-table-column>
            <el-table-column label="培训机构负责人" prop="c" align='center'></el-table-column>
            <el-table-column label="培训进度" prop="d" align='center' style="width:">
                <template slot-scope="{row,$index}">
                    <div class="line2">
                        <div v-if="row.d>60" class="per" :style="{width: row.d + '%'} "></div>
                        <div v-if="row.d>40 && row.d<=60" class="per" :style="{width: row.d + '%', background:'linear-gradient(90deg,rgba(250,162,61,1) 0%,rgba(254,206,117,1) 100%)'} "></div>
                        <div v-if="row.d>0 && row.d<=40" class="per" :style="{width: row.d + '%', background:'linear-gradient(90deg,rgba(241,109,69,1) 0%,rgba(255,18,0,1) 100%)'} "></div>
                    </div>
                    <span class="left10">{{row.d}}%</span>
                </template>
            </el-table-column>
            <el-table-column label="培训进度" prop="e" align='center'>
                <template slot-scope="{row,$index}">
                    <div class="line2">
                        <div v-if="row.e>60" class="per" :style="{width: row.e + '%'} "></div>
                        <div v-if="row.e>40 && row.e<=60" class="per" :style="{width: row.e + '%', background:'linear-gradient(90deg,rgba(250,162,61,1) 0%,rgba(254,206,117,1) 100%)'} "></div>
                        <div v-if="row.e>0 && row.e<=40" class="per" :style="{width: row.e + '%', background:'linear-gradient(90deg,rgba(241,109,69,1) 0%,rgba(255,18,0,1) 100%)'} "></div>
                    </div>
                    <span class="left10">{{row.e}}%</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
</template>

<script>
import Chart1 from './chart/Chart1';
import Chart2 from './chart/Chart2';
export default {
    components: { Chart1, Chart2 },
    data() {
        return {
            menuList: [
                {tit: '培训计划完成率', color: 'linear-gradient(180deg,rgba(255,145,64,1) 0%, rgba(255,94,38,1) 100%)', a: '90%', b:'16%', ico1: require('../../assets/ico3.png'), ico2: require('../../assets/ico1.png')},
                {tit: '已培训人员数量', color: 'linear-gradient(0deg,rgba(23,199,146,1) 0%, rgba(46,219,167,1) 100%)', a: '60', b:'20%', ico1: require('../../assets/ico4.png'), ico2: require('../../assets/ico1.png')},
                {tit: '培训计划完成率', color: 'linear-gradient(0deg,rgba(47,123,238,1) 0%, rgba(30,173,255,1) 100%)', a: '195', b:'8%', ico1: require('../../assets/ico5.png'), ico2: require('../../assets/ico2.png')}
            ],
            list1: [
                { per: '15', b: '评估人员培训补贴', color1: '#FFAD4F', color2: 'linear-gradient(83deg,rgba(255,208,106,1),rgba(255,222,162,1))'},
                { per: '40', b: '护理人员培训补贴', color1: '#6F98FF', color2: 'linear-gradient(90deg,rgba(111,152,255,1),rgba(78,195,255,1))'},
                { per: '49', b: '养老服务技能培训补贴', color1: '#FF6C61', color2: 'linear-gradient(90deg,rgba(255,157,141,1),rgba(255,108,97,1))'},
                { per: '5', b: '其他', color1: '#10CF98', color2: 'linear-gradient(90deg,rgba(86,224,179,1),rgba(24,200,146,1))'},
            ],
            list: [

                {a: '201911070001', b: '家政为荣培训有限公司', c: '李伟荣', d: '70', e: 70},
                {a: '201919702354', b: '汇德培训有限公司', c: '董丽丽', d: '40', e: 55},
                {a: '201516970056', b: '御轩阁培训有限公司', c: '王海', d: '84', e: 68},
                {a: '201812560041', b: '科斯恩贝培训有限公司', c: '张春丽', d: '25', e: 70},
                {a: '201412580151', b: '向阳培训有限公司', c: '葛荣义', d: '70', e: 82},
                {a: '201654870565', b: '康博维意培训有限公司', c: '向华栋', d: '55', e: 66},
                {a: '201168705365', b: '荣事达康培训有限公司', c: '李国强', d: '65', e: 95},
            ]
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        
    }
};
</script>

<style scoped>

</style>
